<template>
  <div class="jx-newdetail">
    <div class="title">基本信息</div>
    <div class="detail-item">
      <div class="item_2">
        <el-form-item label="活动名称：" prop="item3">
          <el-input v-model="params_list.itme3" placeholder="请输入活动名称">
          </el-input>
        </el-form-item>
        <el-form-item label="活动链接：" prop="item4">
          <el-input v-model="params_list.itme4" placeholder="请输入活动链接">
          </el-input>
        </el-form-item>
        <el-form-item label="活动地区：" prop="item5">
          <el-cascader
            v-model="params_list.itme5"
            :options="options"
            :props="props"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="报名时间：" prop="item6">
          <!-- <el-date-picker
            v-model="params_list.itme6"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker> -->
          <div class="time-inline">
            <el-date-picker
              @change="changeTime"
              v-model="params_list.itme6"
              
              type="datetime"
              placeholder="选择开始日期">
            </el-date-picker>
            <span class="text">至</span>
            <el-date-picker
              :disabled="other.registration_time"
              v-model="params_list.itme7"
              type="datetime"
              placeholder="选择结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="活动时间：" prop="item7">
          <div class="time-inline">
            <el-date-picker
              v-model="params_list.itme7"
              type="datetime"
              placeholder="选择开始日期">
            </el-date-picker>
            <span class="text">至</span>
            <el-date-picker
              v-model="params_list.itme7"
              type="datetime"
              placeholder="选择结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </div>
      <div class="item_2">
        <el-form-item label="引导logo：" prop="item8">
          <el-upload
            class="avatar-uploader jx-uploader"
            name="pic"
            :data="upload"
            :headers="headers"
            :action="$api.common.upload"
            :show-file-list="false"
            :on-success="uploadlogoSuccess">
            <img v-if="params_list.itme8" :src="params_list.itme8" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> 
        </el-form-item>
        <el-form-item label="引导图：" prop="item9">
          <el-upload
            class="avatar-uploader jx-uploader"
            name="pic"
            :data="upload"
            :headers="headers"
            :action="$api.common.upload"
            :show-file-list="false"
            :on-success="uploadSuccess">
            <img v-if="params_list.itme9" :src="params_list.itme9" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> 
        </el-form-item>
      </div>
    </div>
    <div class="title">活动要求</div>
    <div class="detail-item">
      <div class="item">
        <el-radio-group v-model="params_list.radio" @change="getActive">
          <el-radio :label="1">不限</el-radio>
          <el-radio :label="2">限制条件</el-radio>
        </el-radio-group>
        <div class="active-item" v-if="boo.isClaim">
          <el-checkbox-group v-model="params_list.checkactive" @change="getLogistics">
            <div class="item">
              <el-checkbox label="1">
                开店时间超过
                <el-input v-model="params_list.item10" placeholder="请填写"></el-input>
                <span>个月；</span>
              </el-checkbox>
            </div>
            <div class="item">
              <el-checkbox label="2">
                店铺好评小于
                <el-input v-model="params_list.item11" placeholder="请填写"></el-input>
                <span>分；</span>
              </el-checkbox>
            </div>
            <div class="item">
              <el-checkbox label="3">
                店铺好评大于
                <el-input v-model="params_list.item12" placeholder="请填写"></el-input>
                <span>分；</span>
              </el-checkbox>
            </div>
            <div class="item">
              <span class="item-text">必须是</span>
              <el-checkbox label="4">旗舰店</el-checkbox>
              <el-checkbox label="5">工厂店</el-checkbox>
              <el-checkbox label="6">普通店铺</el-checkbox>
            </div>
            <div class="item">
              <span class="item-text">必须具有</span>
              <el-checkbox label="7">一类</el-checkbox>
              <el-checkbox label="8">二类</el-checkbox>
              <el-checkbox label="9">三类</el-checkbox>
              <span class="item-text" style="margin-left: 20px;">修理资质</span>
            </div>
            <div class="item">
              <el-checkbox label="10">
                其他要求
                <el-input class="textarea" v-model="params_list.item13" type="textarea" :row="6" placeholder="请填写其他要求"></el-input>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        
      </div>
    </div>
    <div class="title">折扣要求</div>
    <div class="detail-item">
      <div class="item">
        <el-radio-group v-model="params_list.radio_discount" @change="getDiscount">
          <el-radio :label="1">不限</el-radio>
          <el-radio :label="2">限制条件</el-radio>
        </el-radio-group>
        <div class="active-item" v-if="boo.isDiscount">
          <el-checkbox-group v-model="params_list.checkdiscount" @change="getLogistics">
            <div class="item">
              <el-checkbox label="1">
                商品折扣需低于
                <el-input v-model="params_list.item10" placeholder="请填写"></el-input>
                <span>折</span>
              </el-checkbox>
            </div>
            <div class="item">
              <el-checkbox label="2">
                商品总价需小于
                <el-input v-model="params_list.item11" placeholder="请填写"></el-input>
                <span>元</span>
              </el-checkbox>
            </div>
            <div class="item">
              <el-checkbox label="3">
                商品总价需大于
                <el-input v-model="params_list.item10" placeholder="请填写"></el-input>
                <span>元</span>
              </el-checkbox>
            </div>
            <div class="item">
              <el-checkbox label="10">
                其他要求
                <el-input class="textarea" v-model="params_list.item11" type="textarea" :row="6" placeholder="请填写其他要求"></el-input>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="title">活动说明</div>
    <div class="detail-item">
      <div class="item">
        <el-input class="textarea" v-model="params_list.item14" type="textarea" :row="6" placeholder="请填写其他说明"></el-input>
      </div>
    </div>
  </div> 
</template>

<script>
  const address = [
    {value: '0',label: '不限'},
    {value: '1',label: '北京', children: [{value: '1-1',label: '东城区'}]},
    {value: '2',label: '安徽', children: [{value: '2-1',label: '合肥'},{value: '2-1',label: '芜湖'}]},
  ]
	export default {
		data() {
			return {
        boo: {
          loading: false,
          isClaim: false,
          isDiscount: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        other: {
          registration_time: true,
        },
        params_list: {
          item3: '',
          item4: '',
          item5: '',
          item6: '',
          item7: '',
          item8: '',
          item9: '',
          checkactive: [],
          radio: '',
          item10: '',
          item11: '',
          item12: '',
          radio_discount: '',
          checkdiscount: [],
          item13: '',
          item14: '',
        },
        props: {
          expandTrigger: 'click', 
          value: 'value',
          label: 'label',
        },
        options: address,
        upload: {
          dir: 'work'
        }, 
        rules: {
          item3: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
          item4: [{ required: true, message: '请输入活动链接', trigger: 'blur' }],
          item5: [{ required: true, message: '请选择活动地区', trigger: 'change' }],
          item6: [{ required: true, message: '请选择报名时间', trigger: 'change' }],
          item7: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
          // item8: [{ required: true, message: '请选择引导logo', trigger: 'change' }],
          // item9: [{ required: true, message: '请选择引导图', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
      uploadlogoSuccess(res, file){
        let _self = this
      	if (res.status == 200) {
          _self.params_list.itme8 = res.data
        } else {
          _self.$message.error(res.message)
        }
      },
      uploadSuccess(res, file) {
        let _self = this
      	if (res.status == 200) {
          _self.params_list.itme9 = res.data
        } else {
          _self.$message.error(res.message)
        }
      }, 
      getActive(){
        let _self = this
        if(_self.params_list.radio == 2){
          _self.boo.isClaim = true
        }else {
          _self.boo.isClaim = false
        }
      },
      getDiscount(){
        let _self = this
        if(_self.params_list.radio_discount == 2){
          _self.boo.isDiscount = true
        }else {
          _self.boo.isDiscount = false
        }
      },
      changeTime(val){
        let _self = this
        if(!val){
          _self.other.registration_time = true
        }else{
          _self.other.registration_time = false        
          _self.params_list.item5 = val
        }
        _self.params_list.item6 = ''
      },
      getLogistics(){
        let _self = this
        console.log(_self.params_list.checkactive)
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            console.log(_self.params_list)
            if(_self.params_list.radio == '') return _self.$message.error('请选择活动要求')
            if(_self.params_list.radio == 2 && _self.params_list.checkactive.length == 0) return _self.$message.error('请选择活动限制条件')
            _self.params_list.checkactive.forEach(function(item){
              if((item == 1) && (_self.params_list.item10 == '')){
                return _self.$message.error('请填写开店时间')
              }else if((item == 2) && (_self.params_list.item11 == '')){
                return _self.$message.error('请填写店铺好评最小分值')
              }else if((item == 3) && (_self.params_list.item12 == '')){
                return _self.$message.error('请填写店铺好评最大分值')
              }else if((item == 10) && (_self.params_list.item13 == '')){
                return _self.$message.error('请填写其他要求')
              }
            })
            if(_self.params_list.radio_discount == '') return _self.$message.error('请选择折扣要求')
            if(_self.params_list.item14 == '') return _self.$message.error('请输入活动说明')
            console.log('1231321312')
            // _self.boo.saveing = true
            // let params = {
            //   name: _self.currentRow.name,
            // }    
            // let success = (res)=>{
            //   res = res.data
            //   if(res.status == 200){
            //     _self.getList()
            //   }else{
            //     _self.$message.error(res.message)
            //   }
            //   _self.boo.saveing = false
            //   _self.boo.showDialog = false
            // }
            // _self.$axios.post(_self.https.checked, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .active-item
    margin: 20px 70px 0
    padding: 20px 5px 10px
    background: #fbfbfb
    .item 
      margin-bottom: 20px
      /deep/ .el-input__inner
        max-width: 220px
        margin-left: 5px
      .item-text
        display: inline-block
        font-size: 14px
        margin-right: 20px
      .textarea
        width: 100%
        display: block
        margin: 15px 0
        min-width: 400px
  /deep/ .el-range-editor--small.el-input__inner
    width: 70%
  .time-inline
    width: 70%
    display: flex
    .text
      padding: 0 10px
      line-height: 32px
</style>
